<template>
  <div style="padding:0 20px;box-sizing:border-box;">
    <div id="draw_board">
      <div id="goods">
        <span>{{ goods[index] }}</span>
        <el-button @click="refresh">刷新</el-button>
      </div>
      <Canvas></Canvas>
    </div>
    <div id="user-box">
      <Msg :answer="goods[index]"></Msg>
    </div>
  </div>
</template>

<script>
import Msg from '@/components/nhwc/msg'
import Canvas from '@/components/nhwc/canvas'
export default {
  components: {
    Msg,
    Canvas
  },
  data () {
    return {
      goods: [
        '牙刷',
        '牙膏',
        '肥皂',
        '香皂',
        '拖鞋',
        '毛巾',
        '刷子',
        '衣架',
        '毛毯',
        '杯子',
        '水壶',
        '茶杯',
        '茶壶',
        '杯垫',
        '瓷碗',
        '筷子',
        '勺子',
        '盘子',
        '叉子',
        '剪刀',
        '针线',
        '菜刀',
        '饭盒',
        '软尺',
        '梳子',
        '头绳',
        '拖把',
        '扫帚',
        '簸箕',
        '抹布',
        '唇膏'
      ],
      index: 0
    }
  },
  methods: {
    refresh () {
      this.index = parseInt(Math.random() * this.goods.length)
    }
  },
  mounted () {
    this.$socket.emit('strokes_out', function (data) {
      this.outDraw(data)
    })
    this.index = parseInt(Math.random() * this.goods.length)
  }
}
</script>

<style scope>
#draw_board {
  float: left;
}
#user-box {
  float: left;
  height: 800px;
  width: calc(100% - 1202px);
}
</style>
